import React, { useEffect, useRef } from 'react';
import './test.css';

const FoodItem = ({ foodname, info }) => {
  const infoRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const rect = infoRef.current.getBoundingClientRect();
      if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
        infoRef.current.classList.add('show');
      } else {
        infoRef.current.classList.remove('show');
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className="food-item">
      <div className="food-name">{foodname}</div>
      <div className="food-info hidden" ref={infoRef}>{info}</div>
    </div>
  );
};

export default FoodItem;
